<template>
<div>
  <!-- 创建一个Element UI的菜单组件，设置样式和颜色属性 -->
  <el-menu
      style="width: 200px; min-height: calc(100vh - 50px);"
      :default-active="path"  <!-- 绑定当前激活的菜单项 -->
      class="el-menu-vertical-demo"
      @open="handleOpen"  <!-- 绑定打开菜单的事件 -->
      @close="handleClose" <!-- 绑定关闭菜单的事件 -->
      router  <!-- 启用Vue Router的模式 -->
      background-color="#30333c" text-color="#fff" <!-- 设置菜单的背景和文字颜色 -->
  >
    <!-- 单个菜单项 -->
    <el-menu-item index="/dashboard">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icondashboard "></use>
      </svg>
      <span>展示板</span>
    </el-menu-item>
    <!-- 包含子菜单的菜单项 -->
    <el-sub-menu index="2">
      <template #title>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-mingpian "></use>
        </svg>
        <span>个人信息</span>
      </template>
      <el-menu-item index="/person">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-a-bianji1 "></use>
        </svg>
        <span>修改个人信息</span>
      </el-menu-item>
      <el-menu-item index="/password">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-mima "></use>
        </svg>
        <span>修改密码</span>
      </el-menu-item>
    </el-sub-menu>
    <!-- 条件渲染的菜单项，根据用户角色显示不同的菜单 -->
    <el-menu-item index="/user" v-if="user.role == 1">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#iconreader "></use>
      </svg>
      <span>读者管理</span>
    </el-menu-item>
    <!-- 更多菜单项... -->
  </el-menu>
</div>
</template>


<script>
export default {
  name: "Aside",  /*<!-- 组件的名称 -->*/
  created(){
    // 在组件创建时，从sessionStorage获取用户信息并解析为JSON对象
    let userStr = sessionStorage.getItem("user") ||"{}"
    this.user = JSON.parse(userStr)
  },
  data(){
    return {
      user: {},  /*<!-- 用户信息 -->*/
      path: this.$route.path  /*<!-- 当前路由路径 -->*/
    }
  }
}
</script>


<style scoped>
.icon {
  width: 30px;
  height: 30px;
  padding-top: 5px;
  padding-right: 10px;/*  <!-- 设置图标样式 --> */
}
</style>
